<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  
  
<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyUI/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyUI/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyUI/css/demo.css">
	<script src="<%=basePath%>/js/jquery-1.8.3.js"></script>
	<!--jquery.easyui.min.js包含了easyUI中的所有插件-->
	<script src="<%=basePath%>/js/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var flag ;		//undefined 判断新增和修改方法 
		//转换日期格式  
        function changeDateFormat(cellval) {
            if (cellval != null) {
                var date = new Date(parseInt(cellval, 10));
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                return date.getFullYear() + "-" + month + "-" + currentDate;
            }
        }
	
			$('#rolesTable').datagrid({
				idField: 'id',    //只要创建数据表格 就必须要加 ifField
				url: '<%=basePath%>getAllRoles.do',
				title: '角色信息',
				//width: '1000',
				height:450 ,
				fitColumns: true,				//宽度自适应
				striped: true ,					//隔行变色特性
				//rownumbers:true,				//显示行号
				//singleSelect:true ,				//单选模式 
				loadMsg: '数据正在加载,请耐心的等待...' ,
				frozenColumns:[[				//冻结列特性 ,不要与fitColumns 特性一起使用 
					{							//如果需要多选，需要禁止单选模式 
						field:'ck' ,
						width:50 ,
						checkbox: true
					}
				]],
				
				columns:[[
					{field:'id',title:'编号',width:120,align:'center'},
					{
						field:'roleid',
						title:'角色编号',
						width:120,
						align:'center' ,   //居中显示
						
					},
					{field:'rolename',title:'角色名称',width:120,align:'center'},
					{field:'founder',title:'创建人',width:120,align:'center'},			
					{
						field:'state',
						title:'状态',
						width:120,
						align:'center',
						formatter:function(value , record , index){
							if(value == 1){
								return '<span style=color:green; >启用</span>' ;
							} else if( value == 0){
								return '<span style=color:green; >禁用</span>' ; 
							}
						}
					},
					{field:'updatetime',title:'最后修改时间',width:120,align:'center',
						 formatter: function (value, row, index) {
	                          return changeDateFormat(value);
	                      }	
					}

				]],
				pagination: true ,   //在底部显示分页栏
				pageSize: 5 ,		 //每页显示多少个
				pageList:[5,10,15], //初始化页面尺寸的选择列表
				
				
				
				toolbar:[
					{
					    iconCls:"icon-add",//按钮上的图标
					        text:"添加角色", //按钮的文字
					        handler:function(){
					        	flag = 'add';   //改变flag的值
					        	//$('#myform').find('input[name!=sex]').val("");
								$('#myform').get(0).reset();
								//$('#myform').form('clear');
								$('#mydialog').dialog({
										title:'新增角色'
									});
					            $("#mydialog").dialog("open");
					        }
					},
					
					{
					    iconCls:"icon-edit",//按钮上的图标
					        text:"编辑角色",//按钮的文字
					        handler:function(){
					        	flag = 'edit';   //改变flag的值
								var arr =$('#rolesTable').datagrid('getSelections');    //获取被选中的行，返回的是数组
								if(arr.length != 1){
									//窗口显示在右下角
									/*$.messager.show({
										title:'提示信息!',
										msg:'只能选择一行记录进行修改!'
									});*/
									$.messager.alert("提示信息!","只能选择一行记录进行修改!")
								}else {
									$('#mydialog').dialog({
										title:'修改角色'
									});
									$('#mydialog').dialog('open'); //打开窗口
									$('#myform').get(0).reset();   //清空表单数据 
									$('#myform').form('load',{	   //调用load方法把所选中的数据load到表单中,非常方便
										id:arr[0].id ,
										rolename:arr[0].rolename ,
										roleid:arr[0].roleid ,
										state:arr[0].state 
									});
								}
					        }
					},
					
					/* 删除用户 */
					{
					    iconCls:"icon-remove",//按钮上的图标
					        text:"删除角色",//按钮的文字
					        handler:function(){
					            //console.log('删除');   //在浏览器控制台打印日志
					        	var arr =$('#rolesTable').datagrid('getSelections');
					           // alert(arr.length);
								if(arr.length <=0){
									/*$.messager.show({
										title:'提示信息!',
										msg:'至少选择一行记录进行删除!',
										
									});*/
									$.messager.alert("系统提示", "至少选择一行记录进行删除!");
								}else {
									
									$.messager.confirm('提示信息' , '确认删除?' , function(r){
											if(r){
													var ids = '';
													for(var i =0 ;i<arr.length;i++){
														ids += arr[i].id + ',' ;
													}
													//alert(ids);
													ids = ids.substring(0 , ids.length-1);
													$.post('delMoreRoles.do' , {"ids":ids} , function(result){
														//1 刷新数据表格 
														$('#rolesTable').datagrid('reload');
														//2 清空idField   
														$('#rolesTable').datagrid('clearSelections');   //unselectAll取消选中当前页所有的行。   clearSelections清除所有的选择。
														//3 给提示信息 
														/*$.messager.show({
															title:result.status , 
															msg:result.message*/
															if(result>0){
																$.messager.alert("系统!","数据删除成功!");
															}else{
																$.messager.alert("系统!","数据删除失败!");
															}
														},"json");
													//});
											}  else {
												return ;
											}
									});
								}
					        }
					},
					
					
	
				]
				
				
				
				
			});

			
			$('#btn1').click(function(){
				if($('#myform').form('validate')){
					$.ajax({
						type: 'post' ,
						url: flag=='add'? '<%=basePath%>insertRolesSelective.do':'<%=basePath%>updateRolesByPrimaryKeySelective.do' ,
					    //url:'user/save',
						cache:false ,
						data:$('#myform').serialize() ,
						dataType:'json' ,
						success:function(result){
							//1 关闭窗口
							$('#mydialog').dialog('close');
							//2刷新datagrid 
							$('#rolesTable').datagrid('reload');
							//3 提示信息
							  $.messager.show({
								title:"提示" , 
								msg:"操作成功"
							});
						} ,
						 error:function(result){
							$.meesager.show({
								title:"提示" , 
								msg:"操作失败"
							});
						}  
					});
				} else {
					$.messager.show({
						title:'提示信息!' ,
						msg:'数据验证不通过,不能保存!'
					});
				}
		});	
			
			
			/**
			 * 关闭窗口方法
			 */
			$('#btn2').click(function(){
				$('#mydialog').dialog('close');
			});
			
			
			
			 //js方法：序列化表单 			
			function serializeForm(form){
				var obj = {};
				$.each(form.serializeArray(),function(index){
					if(obj[this['name']]){
						obj[this['name']] = obj[this['name']] + ','+this['value'];
					} else {
						obj[this['name']] =this['value'];
					}
				});
				return obj;
			}
			
			
			
			/* ================================== */
			
			
			
	});
	</script>
<title>Insert title here</title>
</head>
<body >
		<!-- 显示所有角色信息的表格 -->
		<div region="center"  style="padding: 5px; background: #eee;">
			<table id="rolesTable" ></table>
    	</div>
    	
    	<!-- 弹出对话框 -->
    	<!-- modal：模态窗口      draggable：窗口不可拖动    closed：默认关闭-->
	<div id="mydialog" title="新增角色" modal=true  draggable=false class="easyui-dialog" closed=true style="width:400px; height: 180px">
			<form id="myform" action="" method="post">
				<input type="hidden" name="id"  /><br>
   				<table style="margin-left: 80px">
   					<tr >
   						<td>角色编号:</td>
   						<td><input type="text" name="roleid" value="" class="easyui-validatebox" required=true validType="midLength[2,5]" missingMessage="姓名必填!" invalidMessage="姓名必须在2到5个字符之间!" /></td>
   					</tr>
   					
   					
   					<tr>
   						<td>角色名称:</td>
   						<td>
   						<select  class="easyui-combobox" name="rolename" >  
					    <option >---请选择---</option>  
					    <option value="会员">会员</option>  
					    <option value="管理员">管理员</option>  
						</select> 
						
   						<!-- <input type="text" name="rolename" value="" class="easyui-validatebox" 
   						required=true validType="midLength[2,5]" missingMessage="姓名必填!" 
   						invalidMessage="姓名必须在2到5个字符之间!" /> -->
   						</td>
   					</tr>
   					
   					<tr>
   						<td>角色状态:</td>
   						<td>
	   						启用<input type="radio" name="state" value="1" required=true  /> &nbsp;&nbsp;&nbsp;&nbsp;
	   						禁用<input type="radio" name="state" value="0" required=true  />
   						<td>
   					
   					</tr>
   					
   					<tr align="center">
   						<td colspan="2">
   							<a id="btn1" class="easyui-linkbutton">保存</a>
   							<a id="btn2" class="easyui-linkbutton">关闭</a>
   						</td>
   					</tr>
   					
   					
   					
   				</table>
			</form>
	
	</div>
	
	
</body>
</html>